<template>
    <div>
        <div class="container">
            <div class="handle-box">
                <el-button type="primary" class="handle-del mr10" @click="added">新增</el-button>
            </div>
            <el-table
                    :data="tableData"
                    border
                    class="table"
                    ref="multipleTable"
                    element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(0, 0, 0, 0.8)"
                    v-loading="loading"
                    header-cell-class-name="table-header">
                <el-table-column prop="id" label="ID" align="center"></el-table-column>
                <el-table-column prop="banner_url" label="图片" align="center">
                    <template slot-scope="scope">
                        <el-image
                            style="width: 50px; height: 50px"
                            :src="'https://wjapi.surveydiscovery.com' + '/'+scope.row.banner_url"
                            :preview-src-list="[ 'https://wjapi.surveydiscovery.com' + '/'+scope.row.banner_url]"
                        ></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="url" label="跳转地址" align="center"></el-table-column>
                <el-table-column prop="status" label="状态" align="center">
                    <template slot-scope="scope">
                        <div v-if="scope.row.status===1" style="color: #00a854">启用</div>
                        <div v-if="scope.row.status===0" style="color: #f02d2d">不启用</div>
                    </template>
                </el-table-column>
                <el-table-column prop="create_time" label="创建时间" align="center"></el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog
                :title="type?'新增轮播图':'修改轮播图'"
                :visible.sync="AddAuth"
                width="50%"
                :close-on-click-modal="false"
        >
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="跳转地址">
                    <el-input v-model="form.url"></el-input>
                </el-form-item>
                <el-form-item label="排序">
                    <el-input v-model="form.sort"></el-input>
                </el-form-item>
                <el-form-item label="启用">
                    <el-radio-group v-model="form.status">
                        <el-radio label="1">启用</el-radio>
                        <el-radio label="0">不启用</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="资质图片">
                    <div style="display: flex;align-items: flex-end;">
                        <el-image style="width: 550px; height: 200px" :src="form.banner_url"
                            :preview-src-list="[form.banner_url]">
                        </el-image>
                        <div>
                            <div>图片大小:500*200</div>
                            <input type="file" accept="image/jpeg,image/jpg,image/gif,image/png,image/bmp"
                                id="cert_file" @change="imgChange1" />
                        </div>
                    </div>
                </el-form-item>
                <el-form-item style="margin-top: 20px">
                    <el-button type="primary" @click="onSubmit">{{ type ? '立即创建' : '立即修改' }}</el-button>
                    <el-button @click="cancellation">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

    </div>
</template>

<script>
import {
    Loading
} from 'element-ui';
import AxiosPost from '../api/index'
import {imgUploads} from "@/api/imgUplpads";

export default {
    name: 'BannerList',
    data() {
        return {
            type: false,
            AddAuth: false,
            loading: true,
            tableData: [],
            imageUrl: '',
            Token: '',
            form: {
                id: '',
                url:'',
                sort: '1',
                status:'',
                banner_url:''
            },
        };
    },
    created() {
        this.getData();

    },
    methods: {
        imgChange1(e) {
            const _this = this
            this.files1 = null
            this.files1 = e.target.files[0]
            let reader = new FileReader();
            reader.onload = function (e) { // 文件读取成功完成后的处理
                _this.form.banner_url = e.target.result;
            };
            reader.readAsDataURL(this.files1);

        },
        async getQiniuToken() {
            let info = await AxiosPost('/admin/login/qiniutoken', {scope: this.$store.state.scope_img})
            this.Token = info.data
        },
        async uplImage(file) {
            await this.getQiniuToken();
            let aa = await imgUploads(this.Token, this.$store.state.upload_qiniu, this.$store.state.banner_url, file.raw);
            if (aa.status === 1) {
                this.form.banner_url = aa.file;
                this.imageUrl = this.$store.state.show_qiniu_img + '/' + aa.file;
            } else if (aa.status === 2) {
                this.$message.error(aa.msg)
                this.$refs.upload.clearFiles();
            }
        },
        added() {
            this.type = true
            this.AddAuth = true
        },
        async getData() {
            this.loading = true
            let info = await AxiosPost('/admin/shop_set/shopbannerlist')
            if (info.code !== 10000) {
                this.$message.error(info.message)
                return false
            }
            this.loading = false
            info.data.forEach(item => {
                item.create_time = this.$moment(item.create_time * 1000).format('YYYY-MM-DD HH:mm:ss')
            })
            this.tableData = info.data
        },

        cancellation() {
            this.AddAuth = false
        },
        async onSubmit() {
            const _this = this
            const loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            const formData = new FormData();
            formData.append('id', this.form.id);
            formData.append('url', this.form.url);
            formData.append('sort', this.form.sort);
            formData.append('status', this.form.status);
            formData.append('banner_url', this.files1);
            // 执行上传操作
            const xhr = new XMLHttpRequest();
            xhr.open('POST', 'https://wjapi.surveydiscovery.com/shop_set/shopbannersave', true);
            xhr.setRequestHeader('authorization', "Bearer " + localStorage.getItem("uid") + "." + localStorage.getItem("token"));
            xhr.onreadystatechange = function () {
                if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
                    // 上传成功处理逻辑
                    loading.close();
                    _this.AddAuth = false
                    _this.$message.success('提交成功')
                } else {
                    loading.close();
                    this.$message.error('提交失败')
                    return false
                }
            };
            xhr.send(formData);
            setTimeout(()=>{
                _this.getData()  
            },500)

        },
        // 编辑操作
        handleEdit(index, row) {
            this.form.banner_url =  'https://wjapi.surveydiscovery.com' + '/' + row.banner_url
            this.form.id = row.id
            this.form.url = row.url
            this.form.status = row.status+''
            this.form.sort = row.sort
            this.type = false
            this.AddAuth = true
        },
    }
};
//时间戳转换
</script>

<style>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}

.table {
    width: 100%;
    font-size: 14px;
}

.red {
    color: #ff0000;
}

.mr10 {
    margin-right: 10px;
}

.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
